<template>
    <div class="table-container">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            header-row-class-name="header-row"
        >
            <!-- 合并的标题栏 -->
            <el-table-column label="用户信息" :colspan="2" align="center">
                <template slot-scope="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>

            <!-- 固定的第一列，使用 scoped-slot 来自定义内容 -->
            <el-table-column
                label="姓名"
                width="100"
                align="center"
                fixed="left"
            >
                <template slot-scope="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>

            <!-- 中间列，可以横向滚动 -->
            <el-table-column
                v-for="(column, index) in columns"
                :key="index"
                :prop="column.key"
                :label="column.label"
                :width="column.width"
                align="center"
            ></el-table-column>

            <!-- 固定的最后一列，使用 scoped-slot 来自定义内容 -->
            <el-table-column
                label="得分"
                width="100"
                align="center"
                fixed="right"
            >
                <template slot-scope="{ row }">
                    {{ row.score }}
                </template>
            </el-table-column>
        </el-table>
        <mockBtn></mockBtn>
    </div>
</template>

<script>
import mockBtn from "./mock.vue";
export default {
    components: {
        mockBtn,
    },
    data() {
        return {
            tableData: [
                {
                    name: "John",
                    age: 25,
                    gender: "Male",
                    age2: 25,
                    gender2: "Male2",
                    score: 80,
                },
                {
                    name: "Jane",
                    age: 28,
                    gender: "Female",
                    age2: 25,
                    gender2: "Female2",
                    score: 90,
                },
                {
                    name: "Bob",
                    age: 30,
                    gender: "Male",
                    age2: 25,
                    gender2: "Male2",
                    score: 75,
                },
                // 更多数据...
            ],
            columns: [
                { key: "age", label: "年龄", width: "100" },
                { key: "gender", label: "性别", width: "100" },
                { key: "age2", label: "年龄2", width: "100" },
                { key: "gender2", label: "性别2", width: "100" },
                // 更多列...
            ],
        };
    },
};
</script>

<style>
.header-row {
    background-color: #f5f7fa;
    font-weight: bold;
}
</style>
